<template>
	<view class="lucky-draw-palace-grid">
		<view class="lucky-draw-palace-grid-inner-wrapper">
			<view class="grid-item prize-card" v-for="(item,index) in gridModules.first" :key="index"
				:class="{'current':isStart&&(current<8?current===item:current % 8 === item),'transtionend':isTranstionEnd&&(item===current||current%8===item)}"
				@transitionend="transitionend">
				<!-- 正面 -->
				<view class="card-face">
					<image
						src="https://mp-a6359cef-e1f5-4478-96f8-00fab19c712c.cdn.bspapp.com/cloudstorage/e2fa303a-2e6a-4fdc-b4e0-902fd2938ad0.png"
						class="red-packet"></image>
				</view>
				<!-- 反面 -->
				<view class="card-back">
					<image :src="prizeImage" class="prize-img" v-if="prizeImage" />
				</view>
			</view>
			<view class="grid-item play-btn" @click="clickBtn">
				<view class="center-text">
					抽
				</view>
				<view class="residual">
					剩余{{userInfo?userInfo.lotteries_number:0}}次机会
				</view>
			</view>
			<view class="grid-item prize-card" v-for="(item,index) in gridModules.second" :key="index+4"
				:class="{'current':isStart&&(current<8?current===item:current % 8 === item),'transtionend':isTranstionEnd&&(item===current||current%8===item)}"
				@transitionend="transitionend">
				<!-- 正面 -->
				<view class="card-face">
					<image
						src="https://mp-a6359cef-e1f5-4478-96f8-00fab19c712c.cdn.bspapp.com/cloudstorage/e2fa303a-2e6a-4fdc-b4e0-902fd2938ad0.png"
						class="red-packet"></image>
				</view>
				<!-- 反面 -->
				<view class="card-back">
					<image :src="prizeImage" class="prize-img" v-if="prizeImage" />
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { defineProps, defineExpose, defineEmits, ref, Ref, computed, reactive } from 'vue';
	import { throttle } from '@/utils';
	const emit = defineEmits(['end', 'transitionend', 'clickBtn'])

	const gridModules = reactive({
		first: [0, 1, 2, 7],
		second: [3, 6, 5, 4]
	})


	//当前选中的奖项索引
	const current : Ref<number> = ref(0);
	//需要转动的圈数
	const rotateCount : number = 5;
	//速度降下来的圈数
	const changeSpeedRotateCount : number = 1;
	//转动的初始速度
	let startSpeed : number = 50;
	//转动的最终速度
	const endSpeed : number = 500;
	//当前速度
	let speed : number = 0;
	//计时器
	let timer : number = 0;
	//是否结束动画
	const isTranstionEnd : Ref<boolean> = ref(false);
	//是否已开始
	const isStart : Ref<boolean> = ref(false);
	//奖品图片
	const prizeImage : Ref<string> = ref('');


	//开始转动
	function start(index : number) : void {
		if (isStart.value) {
			return
		}
		reset();
		isStart.value = true;
		speed = speed === 0 ? startSpeed : speed;
		//最终的落点index
		const endIndex : number = rotateCount * 8 + index;
		loop(endIndex, index);
	}

	function loop(endIndex : number, index : number) : void {
		clearTimeout(timer);
		if (endIndex === current.value) {
			//结束
			timer = setTimeout(() => {
				end();
			}, speed)
		} else {
			timer = setTimeout(() => {
				if (current.value >= endIndex - 8 * changeSpeedRotateCount) {
					speed += (endSpeed - startSpeed) / (8 * changeSpeedRotateCount);
				}
				current.value += 1;
				loop(endIndex, index)
			}, speed)
		}
	}

	//转动结束
	function end() : void {
		isTranstionEnd.value = true;
		emit('end');
	}

	//翻牌动画结束
	function transitionend() : void {
		isStart.value = false;
		throttle(() => {
			emit('transitionend');
		}, 1000)

	}
	//重设
	function reset() : void {
		current.value = 0;
		speed = 0;
		isTranstionEnd.value = false;
		isStart.value = false;
	}

	function clickBtn() : void {
		emit('clickBtn')
	}

	function setPrize(url : string) : void {
		prizeImage.value = url;
	}

	defineExpose({
		start,
		reset,
		setPrize
	})
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>